<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../libs/js/vue.js"></script>
    <script src="../libs/js/vue-router.js"></script>  
    <title>Document</title>
    <style>
        .box{
            width:80%;
            height:400px;
            border-radius: 10px;
            border:1px solid darkorange;
        }
        .router-link-exact-active, .router-link-active{
            background: darkred;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{msg }}</h2>
        
        <my-head></my-head>
        <!-- 6. 导航跳转 -->
        <p>
            <router-link to="/homepage?uid=2107">首页</router-link>
            <router-link :to="{name:'home',query:{uid:2109}}">首页2</router-link>

            <router-link to="/news/1/infos/武汉?time=0916#zkl">新闻 -1 </router-link>
            <router-link to="/news/2/infos/美国?time=2020#lesson">新闻 -2 </router-link>
            <!-- <router-link to="/user/WH2107?username=ZKL">用户-ZKL</router-link>
            <router-link to="/user/WH2108?username=LAowang">用户-LW</router-link> -->
            <router-link :to="{name:'user',query:{username:'ZZZkkl'},params:{aid:'WH2107'}} ">用户-ZKL</router-link>
            <router-link :to="{name:'user',query:{username:'LALA'},params:{aid:'WH2109'}} ">用户-LALA</router-link>
            <router-link :to="{path:'/user/admin' } ">用户-超管用户</router-link>

            <router-link to="/mine/zuozuomu">我的</router-link>
        </p>
        <hr>
        <!-- 5 路由出口  显示加载当前的路由组件  -->
        <div class="box">
             <router-view></router-view>
        </div>
    </div>

    <template id="head">
        <header>
            <h2>Head- wh2107-daydayup</h2>
        </header>
    </template>

    <template id="home">
        <div>
            <h2>Home - hOme -  主页</h2>
            <h4> uid --- {{$route.query.uid}}</h4>
        </div>
    </template>
    <template id="news">
        <div>
            <h2>news - news -  新闻中心</h2>
            <p>获取参数</p>
            <p>$route </p>
            <p>type === {{$route.params.type }}</p>
            <p>adress == {{$route.params.address}}</p>
            <hr>
            <h4>$route   路由信息对象 </h4>
            <p>$route.params 获取路由参数 </p>
            <p>$route.query  获取路由的查询参数   time=={{$route.query.time }}  </p>
            <p>$router.name  == {{$route.name}}</p>
            <p>$route.path   == {{$route.path}}</p>
            <p>$route.hash  == {{$route.hash}}</p>
            <p>$route.fullPath  == {{$route.fullPath}}</p>
            <p>$route.meta  == {{$route.meta}}</p>
        </div>
    </template>
    <template id="user">
        <div>
            <h2>user - user -  user用户列表</h2>
            <p>
                username -- {{$route.query.username}}
            </p>
            <p>
                id == {{$route.params.aid }}
            </p>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - mine -  我的</h2>
            <h2>uname == {{$route.params.uname }}</h2>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>notfound - notfound -  404</h2>
        </div>
    </template>
    
    <script>
        const Head = {
            template:"#head"
        }
        Vue.component("my-head",Head)
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  Vue脚手架

        // 1. 定义路由组件
        const Home = {
            template:"#home"
        }
        const News = {
            template:"#news"
        }
        const User = {
            template:"#user"
        }
        const Mine = {
            template:"#mine"
        }
        const NotFound = {
            template:"#notfound"
        }
        // 2. 定义路由配置参数
        const routes = [
            {
                path:"/",
                redirect:{
                    name:"home"
                }
            },
            {
                path:"/home",
                component:Home,
                name:'home',
                alias:"/homepage"
            },
            {
                path:"/news/:type/infos/:address?",
                component:News,
                name:'news',
                meta:{
                    isAlive:true,
                    token:"110"
                }
            },
            {
                path:"/user/admin",
                name:"admin",
                component:{
                    template:"<h1>admin - admin  - 超管用户 </h1>"
                }
            },
            {
                path:"/user/:aid",
                component:User,
                name:'user'
            },
          
            {
                path:"/mine/:uname?",
                component:Mine,
                name:"mine"
            },
            {
                path:"/404",
                component:NotFound,
                name:'404'
            },
            {
                path:"*",
                // component:NotFound
                // redirect:"/404"
                redirect:{
                    name:"404"
                }
            }
        ]
        // 3. 创建路由对象
        const router = new VueRouter({
            routes
        })
        // 4.挂载到根实例
        const vm = new Vue({
              // this.$router 获取路由对象
            router,  
            el:"#app",
            data:{
                msg:"路由基础  - 路由参数获取"
            },
            watch:{
                '$route':function(to,from){   // 监听路由切换
                    console.log(to)    // 进入的新路由
                    console.log(from)  // 离开的旧路由 
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
                console.log(this.$router)    // 路由对象  负责路由切换 重定向
                console.log(this.$route)     // 路由信息对象  记录当前路由的相关数据信息  (参数 params query meta )
            }
        })
    </script>

        <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     
        
        $route  路由对象属性 
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变  
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  


        router-link 的 高亮 path  
     -->
</body>
</html>